上一篇已經介紹 Ionic 搭配 Angular 2 是甚麼了,接下來就來介紹如何建構一個 App。
首先要確定 Node.js 有安裝
接者安裝 Cordova,Cordova 是跨平台底層的架構
npm install -g cordova
如果是 Linux 記得加上 sudo
安裝 Ionic CLI
npm install -g ionic
如果之前有失敗或是有安裝過之前的版本,可以 npm uninstall -g ionic
然後再重裝一次。安裝到最新版之後,如果以前有用 Ionic V1 仍然可以正常運作喔!兩個版本兼容的概念。
接著可以檢查一下安裝結果
ionic info
因為 Angular 2 是用 TypeScipt 來開發,所以也要安裝 TypeScript
npm install -g typescript
Ionic 2 提供一個快速建立專案的範本,當然也可以上網找其他人的範本的來使用。
ionic start myIonic2App tutorial --v2
start
:建立新專案myIonic2App
:專案名稱,可自訂tutorial
:開始用的範本,可以在這邊參考其他模板--v2
:代表用 V2 開發,如果你想用 Angular 1 開發就不用加。接著先進入資料夾,然後啟動虛擬伺服器,來執行看看我們的 App,我們會先用瀏覽器模擬 App 畫面,比起手機模擬器來說快多了,不用像開發 Native App 一樣,每改動一次都要編譯等好久。
cd myIonic2App
ionic serve
你會被問如何 serve,選 localhost:8100
,然後應該會自動起動瀏覽器到 http://localhost:8100
,如果沒有就手動輸入。
如果是用 Chrome,按 F12
開啟開發者工具,可以切換成手機瀏覽模式,還可以選擇機款模擬,像這邊就選 iPhone6
Chrome 開發模式下看到的樣子會長這樣
如果想一次看所有平台上的 App 模樣,可以輸入
ionic serve -l
就會長這樣
好囉,所以預備動作都完成啦!這樣就可以來開發了 :)
先來看看 Ionic 2 的專案架構
├── config.xml
├── hooks
├── ionic.config.json
├── node_modules
├── package.json
├── platforms
├── plugins
├── resources
├── src
├── tsconfig.json
├── tslint.json
config.xml
: App 名稱、App 版本、一些設定值等等hooks
: 加入自己寫的 Native Codeplatforms
: 建立 Android、IOS 輸出平台plugins
: Cordova 可以加入 Native Code 的 Pluginresources
: 包含一些資源,像是 App 圖示、啟動圖片之類的src
: 我們寫的所有 code 幾乎都會在這裡,概念跟 Angular CLI 很像,之後會被輸出到 WWW
資料夾Ionic App 建構的部分就到這邊啦!
明天要討論如何開始用 Angular 2 來做開發囉!
現在已經不支援
ionic start myIonic2App tutorial --v2
改為
ionic start myIonic2App tutorial --type=ionic-angular
(--type=ionic-angular為預設可不輸入,如需要v1版,則輸入--type=ionic1)
恩 的確
他改動太頻繁了
語法整套都變了
建議直接去 Ionic 官網看最新的語法